<!DOCTYPE html>
<html>
<head>
	<title>渐变圆弧</title>
	<style type="text/css">
		#draw{
			/*width:600px;
			height:600px;*/
			display: block;
			margin:100px auto;
			border:1px solid #EFEFEF;
		}
	</style>
</head>
<body>
<div id="box">
	<canvas id="draw"></canvas>
</div>
<script type="text/javascript">
	var canvas=document.getElementById("draw");
	canvas.width=600,canvas.height=600;
	var ctx=canvas.getContext('2d');
	ctx.beginPath();
	//第一个圆
	ctx.arc(300,300,160,0,Math.PI*1.5);
	ctx.lineWidth=10;
	ctx.lineCap="round";
	var line=ctx.createLinearGradient(200,200,160,260);
	//var line=ctx.createRadialGradient(200,200,50,200,200,100);
	line.addColorStop(0,'pink');
    line.addColorStop(1,'red');
	ctx.strokeStyle=line;
	ctx.stroke();

	//第二个圆
	ctx.moveTo(420,300);
	ctx.closePath();
	ctx.beginPath();
	ctx.arc(300,300,120,0,Math.PI*1.5);
	var line2=ctx.createLinearGradient(200,200,160,260);
	line2.addColorStop(0,'#78ab91');
    line2.addColorStop(1,'#347661');
	ctx.strokeStyle=line2;
	ctx.stroke();

	//第三个圆
	ctx.moveTo(380,300);
	ctx.closePath();
	ctx.beginPath();
	ctx.arc(300,300,80,0,Math.PI*1.5);
	var line3=ctx.createLinearGradient(200,200,160,260);
	line3.addColorStop(0,'#adeeee');
    line3.addColorStop(1,'#78bbbb');
	ctx.strokeStyle=line3;
	ctx.stroke();

</script>
</body>
</html>